<template>
	<view class="page">
		<!-- 就诊人切换 -->
		<ChangePatient @sendinfo='getInfo'></ChangePatient>
		
		<!-- 初诊挂号医生 -->
		<image style="width: 100%;text-align: center;margin-top: 100rpx;" src="https://cdn8.axureshop.com/demo/2208121/images/%E5%8C%BB%E7%94%9F%E5%88%97%E8%A1%A8/u875.png" mode="widthFix" v-if="returnlists.length==0"></image>
		<view class="first_visit" v-for="(item,index) in returnlists" :key="index" v-else>
			<view class="doctor_info">
				<image style="width: 90rpx;" class="doctor_profire" :src="item.avator" mode="widthFix"></image>
				<view class="text_info">
					<view class="name_call">
						<view class="name">
							{{item.name}}
						</view>
						<view class="call">
							{{item.call}}
						</view>
					</view>
					<view class="depart_campus">
						<view class="depart">
							{{item.depart}}
						</view>
						<view class="campus">
							四川省保健院南苑
						</view>
					</view>
				</view>
			</view>
			<!-- 复诊医院信息 -->
			<view class="return_visit_info">
				<view class="infos">
					复诊院区：四川省保健院南苑
				</view>
				<view class="infos">
					复诊日期：2022-01-30
				</view>
			</view>
			<!-- 操作 -->
			<view class="operte">
				<button class="operteBtn" @click="prescribe">去开药</button>
				<button class="operteBtn registerBtn" @click="register">去挂号</button>
			</view>
		</view>
	</view>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import api from '../../src/utils/api.js'
	const returnlists = reactive([])
	onLoad(()=>{
		api('/appselectpatientid',{
			userid:uni.getStorageSync('userid'),
			memberid:0
		}).then(res=>{
			api('/appselectreturn',{
				patient_id:res.datas[0].patient_id
			}).then(res=>{
				returnlists.push(...res.data)
			}).catch(err=>{
				console.log(err)
			})
		}).catch(err=>{
			console.log(err)
		})
	})
	// 去挂号
	const register = () => {
		uni.navigateTo({
			url:'/pages/Outpatient_registration/Outpatient_registration'
		})
	}
	// 去开药
	const prescribe = () => {
		uni.navigateTo({
			url:'/pages/Self-service/Self-service'
		})
	}
	// 获取切换就诊人信息
	const getInfo = (data) => {
		returnlists.splice(0)
		api('/appselectpatientid',{
			userid:uni.getStorageSync('userid'),
			memberid:data.member_id==0?0:data.member_id
		}).then(res=>{
			console.log(res.datas[0].patient_id)
			api('/appselectreturn',{
				patient_id:res.datas[0].patient_id
			}).then(res=>{
				returnlists.push(...res.data)
			}).catch(err=>{
				console.log(err)
			})
		}).catch(err=>{
			console.log(err)
		})
	}
</script>

<style lang="scss" scoped>
	.page{
		background-color: rgba(242, 242, 242, 1);
		min-height: 100vh;
		padding: 32rpx 30rpx;
		box-sizing: border-box;
		// 就诊人切换
		.patient{
			width: 100%;
			height: 88rpx;
			background-color: #fff;
			border-radius: 16rpx;
			padding:  0 40rpx;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.peopleInfo{
				display: flex;
				align-items: center;
				font-family: 'Microsoft YaHei UI', sans-serif;
				font-size: 28rpx;
				height: 44rpx;
				.name{
					font-size: 32rpx;
				}
				.patient_card{
					color: #aaa;
					margin-left: 44rpx;
				}
			}
			.operate{
				display: flex;
				align-items: center;
				font-family: 'Microsoft YaHei UI', sans-serif;
				font-size: 32rpx;
				color: #000;
				.qie{
					margin-left: 12rpx;
				}
			}
		}
		// 就诊人切换弹出层
		.popup{
			
			.popup-content {
				border-radius: 72rpx 72rpx 0 0;
				padding: 30rpx 45rpx 0;
				box-sizing: border-box;
				height: 804rpx;
				background-color: #fff;
				font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
				position: relative;
				.title{
					font-size: 32rpx;
					font-weight: 700;
					width: 100%;
					text-align: center;
				}
				.close{
					width: 32rpx;
					position: absolute;
					right: 45rpx;
					cursor: pointer;
					top: 38rpx;
				}
				
				.patientlists{
					margin-top: 60rpx;
					.patientlist{
						width: 660rpx;
						height: 92rpx;
						border-radius: 16rpx;
						padding: 0 30rpx;
						box-sizing: border-box;
						display: flex;
						align-items: center;
						background-color: rgba(230, 244, 255, 1);
						font-size: 28rpx;
						font-family: 'Microsoft YaHei UI', sans-serif;
						margin-bottom: 40rpx;
						.patient_card{
							margin-left: 20rpx;
							color: #aaa;
						}
					}
				}
				.addpatient{
					width: 660rpx;
					height: 80rpx;
					line-height: 80rpx;
					font-family: 'Microsoft YaHei UI', sans-serif;
					font-size: 28rpx;
					color: #fff;
					background-image: url('https://cdn8.axureshop.com/demo/2208121/images/%E9%97%A8%E8%AF%8A%E6%8C%82%E5%8F%B7/u579.svg');
					background-size: cover;
					position: absolute;
					bottom: 40rpx;
				}
			}
		}
		
		// 初诊挂号信息
		.first_visit{
			width: 100%;
			height: 382rpx;
			background-color: #fff;
			border-radius: 16rpx;
			margin-top: 30rpx;
			padding: 38rpx 40rpx;
			box-sizing: border-box;
			.doctor_info{
				display: flex;
				align-items: center;
				.text_info{
					margin-left: 40rpx;
					.name_call{
						height: 50rpx;
						line-height: 50rpx;
						display: flex;
						align-items: baseline;
						font-family: 'Microsoft YaHei UI Bold', 'Microsoft YaHei UI Regular', 'Microsoft YaHei UI', sans-serif;
						font-size: 36rpx;
						font-weight: 700;
						.call{
							font-size: 26rpx;
							color: #1F1F1F;
							font-weight: 400;
							margin-left: 36rpx;
						}
					}
					.depart_campus{
						display: flex;
						align-items: center;
						font-family: 'Microsoft YaHei UI', sans-serif;
						font-size: 28rpx;
						margin-top: 4rpx;
						.campus{
							margin-left: 30rpx;
						}
					}
				}
			}
			// 复诊医院信息
			.return_visit_info{
				margin-top: 38rpx;
				.infos{
					height: 40rpx;
					line-height: 40rpx;
					font-family: 'Microsoft YaHei UI', sans-serif;
					font-size: 28rpx;
					color: #333333;
					margin-bottom: 12rpx;
				}
			}
			// 操作
			.operte{
				display: flex;
				justify-content: flex-end;
				margin-top: 24rpx;
				.operteBtn{
					width: 186rpx;
					height: 66rpx;
					line-height: 66rpx;
					border: none !important;
					margin: 0 !important;
					background-image: url('https://cdn8.axureshop.com/demo/2208121/images/%E6%88%91%E7%9A%84%E5%A4%8D%E8%AF%8A/u3414.svg');
					background-size: cover;
					font-family: 'ArialMT', 'Arial', sans-serif;
					color: #000;
					font-size: 24rpx;
				}
				.operteBtn::after{
					border: none !important;
				}
				.registerBtn{
					 background-image: url('https://cdn8.axureshop.com/demo/2208121/images/%E5%BC%80%E5%8D%95%E8%AE%B0%E5%BD%95/u2281.svg');
					 background-size: cover;
					 color: #fff;
					 margin-left: 30rpx !important;
				}
			}
		}
	}       
</style>
